<template>
  <div>
    <vab-card>
      <div class="flex_sb">
        <p class="leve-title">信用额度</p>
        <el-button type="primary" @click="state.dialogVisible = true">
          充值
        </el-button>
      </div>
      <el-row v-if="props?.creditInfo" :gutter="24">
        <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
          <el-form-item label="信用额度" prop="item.key">
            <span class="default-text">
              {{ props?.creditInfo.limit || '--' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
          <el-form-item label="信用余额" prop="item.key">
            <span class="default-text">
              {{ props?.creditInfo.balance || '--' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
          <el-link>信用额度变更详情</el-link>
        </el-col>
      </el-row>
    </vab-card>

    <el-dialog
      v-model="state.dialogVisible"
      title="提示"
      width="30%"
      :before-close="handleClose"
    >
      <el-upload
        ref="upload"
        action="/uploadFlie"
        :auto-upload="false"
        :limit="1"
        :on-exceed="handleExceed"
      >
        <template #trigger>
          <el-button type="primary">选择文件</el-button>
        </template>
        <el-button type="success" @click="submitUpload">上传到服务器</el-button>
        <template #tip>
          <div class="el-upload__tip">限制1个文件，新文件将覆盖旧文件</div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="state.dialogVisible = false">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
  import { Encryption } from '/@/utils/utils'
  const props: any = defineProps({
    creditInfo: {
      type: Object,
      required: true,
      default: {
        limit: '12.00',
        balance: '21.00',
      },
    },
    isUpdate: {
      type: Boolean,
      required: true,
      default: false,
    },
    areaOptions: {
      type: Array,
      required: true,
      default: [],
    },
  })
  const emit = defineEmits(['handleEmit'])

  const state = reactive({
    dataForm: null,
    dialogVisible: false,
    imageUrl: '',
  })

  onMounted(() => {})
  const handleClose = () => {}

  const handleExceed = () => {}
  const submitUpload = () => {}
</script>
